<template>
  <div class="container">
    <header>
      <div class="search fl">
        <input type="image" src="images/ss.jpg" />
        <input type="text" name="search" placeholder="搜索附近的房源" />
      </div>
      <img class="fr" src="images/top.jpg" />
      <div class="clear"></div>
    </header>
    <section class="banner">
      <swiper :options="swiperOption" v-if="imgList.length">
        <swiper-slide v-for="(item,index) in imgList" :key="index">
          <img :src="item.imgPath" />
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </section>
    <section class="content">
      <h1>新房源</h1>
      <ul class="c">
        <li>
          区域
          <span class="icon">&#xe6aa;</span>
        </li>
        <li>
          租金
          <span class="icon">&#xe6aa;</span>
        </li>
        <li>
          户型
          <span class="icon">&#xe6aa;</span>
        </li>
        <li>
          筛选
          <span class="icon">&#xe6aa;</span>
        </li>
      </ul>
      <ul class="case">
        <li v-for="(val,index) in newHouse" :key="index">
          <router-link :to="{name:'detail',params:{hid:val.hid,type:'new'}}">
            <a href="javascript:;">
              <img :src="val.cover" class="fl" />
              <div class="text fr">
                <h1>{{val.name}}</h1>
                <p>{{val.desc}}</p>
                <ul>
                  <li
                    v-for="(v,k) in val.tag"
                    :key="k"
                    :class="v.status == 'active'?'active':''"
                  >{{v.name}}</li>
                </ul>
                <p>
                  {{val.rentMoney}}
                  <span>元/月</span>
                </p>
              </div>
            </a>
          </router-link>
        </li>
      </ul>
      <p
        style="text-align:center; margin-bottom: 2rem;font-size: .4rem;"
        @click="getMore"
      >{{loadMore}}</p>
    </section>
  </div>
</template>

<script type="text/ecmascript-6">
import $ from "jquery";
// 加载异步请求数据模块axios
// import axios from 'axios';
//默认输出一个组件对象
export default {
  // 组件名称
  name: "home",
  // 加载页面的子组件（也没面分离的内容）
  components: {},
  data() {
    return {
      // 定义变量
      swiperOption: {
        autoplay: {
          delay: 1000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        }, //l轮播间隔时间
        loop: true, //是否自动轮播
        pagination: {
          el: ".swiper-pagination",
        }, //轮播图中下标点显示
        paginationClickable: true, //轮播图中下标点显示
      },
      // 广告轮播图数据
      imgList: [],
      loadMore: "加载更多",
      hpn: 1, //页码
    };
  },
  // 生命周期
  mounted() {
    $(window).scrollTop(0); //页面挂载自动滚动到屏幕顶部
    // console.log(this)
    let _this = this;
    // 组件加载渲染前就会执行

    //请求轮播图数据
    this.$axios({
      method: "get",
      url: "/data/ad_data.json",
    })
      .then(function (res) {
        // 请求成功
        // console.log(res);
        let data = res.data;
        // console.log(data);

        // 给data的变量赋值
        if (data.code == 200) {
          _this.imgList = data.home_ad;
        }
      })
      .catch((error) => {
        // 错误（网络中断、请求地址有问题）
        console.log(error);
      });

    this.$store.dispatch("getNewHouse", this.hpn);
  },
  created() {},
  updated() {},
  destroyed() {},
  methods: {
    // 事件的函数
    getMore() {
      // 做分页，加载列表更多数据（去调用中间件的getHouse方法）
      let arr = this.$store.state.home.newHouse;
      let total = this.$store.state.home.houseTotal;
      if (arr.length >= total) {
        return; // 阻止执行
      }
      this.$store.dispatch("getNewHouse", ++this.hpn);
    },
  },
  computed: {
    // 计算属性：当不想再模板里进行属性的逻辑运算是可以利用计算属性避免模板中过多使用表达式
    newHouse() {
      // 定义baseHouse变量
      return this.$store.state.home.newHouse;
    },
  },
  watch: {
    //监听属性，监听属性的值，当值变化时会实时更新熟悉那个值，当值发生变化时触发
    baseHouse() {
      let arr = this.$store.state.home.newHouse;
      let total = this.$store.state.home.houseTotal;
      if (arr.length >= total) {
        // console.log("到底了");
        this.loadMore = "我是底线的";
      }
    },
  },
};
</script>

<style scoped lang="less" rel="stylesheet/less">
header {
  height: 0.7rem;
  margin: 0.35rem 0.25rem 0;
  font-size: 0.28rem;
}

header .search {
  width: 82%;
  height: 0.7rem;
  background-color: #f7f7f7;
  position: relative;
}

header .search input[type="image"] {
  margin-left: 0.33rem;
  margin-top: 0.23rem;
  width: 0.24rem;
  height: 0.24rem;
  top: 0.05rem !important;
}

header .search input[type="text"] {
  background-color: #f7f7f7;
  border: none;
  top: 0 !important;
}

header > img {
  width: 0.38rem;
  height: 0.38rem;
  margin-top: 0.13rem;
}

.navtop ul {
  display: flex;
  justify-content: space-around;
  margin: 0.42px 0;
}

.navtop ul li {
  /*width: 1rem;*/
  width: 25%;
  height: 1.1rem;
  text-align: center;
}

.navtop ul li a {
  width: 100%;
  height: 100%;
  display: block;
}

.navtop ul li img {
  width: 0.46rem;
  height: 0.46rem;
  display: block;
  margin: 0 auto;
}

.navtop ul li p {
  color: #5e5e5e;
  font-size: 0.28rem;
  margin-top: 0.18rem;
}

.content {
  margin: 0 0.24rem 1.6rem;
}

.content > h1 {
  font-size: 0.48rem;
  margin: 0.45rem 0;
}
.swiper-container-horizontal > .swiper-pagination-bullets {
  height: 16px;
  line-height: 16px;
}
</style>